<template>
  <div>
    <!-- 模板管理 -->
    <SectionContainer class="u-p20">
      <SectionTitle>模板管理</SectionTitle>

      <!-- 筛选 start -->
      <el-form
        class="m-filter"
        inline
      >
        <el-form-item>
          <el-select
            class="u-w200"
            size="small"
            placeholder="请选择所属adx"
          ></el-select>
        </el-form-item>
        <el-form-item>
          <el-cascader
            class="u-w200"
            size="small"
            placeholder="请输入广告位名称"
            :show-all-levels="false"
            collapse-tags
            filterable
            clearable
            :options="advertisingOptions"
            :props="{ multiple: true, value: 'id', label: 'name' }"
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-select
            class="u-w100"
            size="small"
            placeholder="请选择状态"
          >
            <el-option label="启用"></el-option>
            <el-option label="停用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="search"
          >查询</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <TableFull
        :data="tableData"
        :total="tableTotal"
        :current-page="page.pageNo"
        @current-change="currentChange"
        @size-change="sizeChange"
      >
        <el-form
          slot="handle"
          class="m-filter"
          inline
        >
          <el-form-item>
            <el-button
              size="small"
              @click="$router.push({
                name: 'other-template-detail',
                query: {
                  action: 'create'
                }
              })"
            >新增</el-button>
          </el-form-item>
        </el-form>
        <template slot="column">
          <el-table-column
            :resizable="false"
            align="center"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="$router.push({
                  name: 'other-template-detail',
                  query: {
                    action: 'edit'
                  }
                })"
              >编辑</el-button>
              <el-button
                type="text"
                @click="$router.push({
                  name: 'other-template-detail',
                  query: {
                    action: 'detail'
                  }
                })"
              >查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            :resizable="false"
            align="center"
            v-for="(item, index) in tableColumn"
            :key="index"
            :prop="item.prop"
            :width="item.width"
            :label="item.label"
          >
            <template slot-scope="scope">
              <!-- 是否启用 -->
              <template v-if="item.prop === 'switch'">
                <el-switch
                  @change="changeStatus(scope.row.id, scope.row.status === 2 ? 1 : 2)"
                  :value="scope.row.status"
                  :active-value="2"
                  :inactive-value="1"
                ></el-switch>
              </template>
              <!-- 其他 -->
              <template v-else>{{scope.row[item.prop]}}</template>
            </template>
          </el-table-column>
        </template>
      </TableFull>
    </SectionContainer>
  </div>
</template>

<script>
import SectionContainer from "@/components/section-container";
import SectionTitle from "@/components/section-title";
import TableFull from "@/components/table-full";
import permissionMixin from "@/mixins/permission";

import { fetchAdLocalSelect } from "@/api";

export default {
  mixins: [permissionMixin],
  components: {
    SectionContainer,
    SectionTitle,
    TableFull
  },
  data() {
    return {
      advertisingOptions: [],
      tableColumn: [
        {
          label: "模板名称",
          prop: ""
        },
        {
          label: "所属adx",
          prop: ""
        },
        {
          label: "模板类型",
          prop: ""
        },
        {
          label: "尺寸",
          prop: ""
        },
        {
          label: "模板预览图",
          prop: ""
        },
        {
          label: "是否启用",
          prop: "switch"
        },
        {
          label: "关联广告位",
          prop: ""
        }
      ],
      tableData: [],
      tableTotal: 0,
      page: {
        pageNo: 1,
        pageSize: 50
      }
    };
  },
  methods: {
    // 广告位
    fetchAdLocalSelect() {
      return fetchAdLocalSelect({
        query: {
          unionId: 0, // adx
          mediaId: 0, // 媒体
          adspaceType: 0 // 创意形式，默认
        }
      }).then(res => {
        this.advertisingOptions = res.data.list;
      });
    },
    // 状态操作
    changeStatus(id, status) {
      // return fetchOtherRoleStatus({
      //   query: {
      //     id,
      //     status
      //   }
      // }).then(() => {
      //   this.$message({
      //     message: "操作成功",
      //     duration: 1000
      //   });
      //   this.getTable();
      // });
    },
    // 重置
    search() {
      this.page.pageNo = 1;
      this.getTable();
    },
    // 列表
    getTable() {
      // this.tableData = [];
      // this.tableTotal = 0;
      // fetchOtherRoleMan({
      //   body: {
      //     ...this.page,
      //     roleName: this.filter.roleName
      //   }
      // }).then(res => {
      //   this.tableTotal = res.data.dataCount;
      //   this.tableData = res.data.data || [];
      // });
    },
    // 分页
    currentChange(val) {
      this.page.pageNo = val;
      this.getTable();
    },
    sizeChange(val) {
      this.page.pageSize = val;
      this.getTable();
    }
  },
  created() {
    this.fetchAdLocalSelect();
  }
};
</script>